<template>
    <div class="left-bar">
        <el-aside :class="iss ? 'aside-64' : 'aside-180'" style="width: 100%">
            <div class="logo">
                <router-link to="/home">
                    <div class="block">
                        <img :class="iss ? 'img-56' : 'img-200'" :src="src" />
                    </div>
                </router-link>
            </div>
            <el-menu :unique-opened="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="iss" router :default-active="$route.path"
                v-if="userPowers"
            >
                <section v-for="(item) in Menu" :key="item.permissionId">
                    <el-submenu v-if="item.children && item.children.length > 0" :index="item.httpPath">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title" style="font-size: 13px">{{item.title}}</span>
                        </template>
                        <section v-for="itemo in item.children" :key="itemo.permissionId">
                            <section v-if="itemo.children.length == 0">
                                <el-menu-item
                                style="font-size: 13px; margin-bottom: 1px;"
                                :key="itemo.permissionId"
                                :index="itemo.httpPath"
                                >{{itemo.title}}</el-menu-item>
                            </section>
                            <section v-else>
                                <el-submenu class="second-submenu" :index="itemo.httpPath">
                                    <template slot="title">
                                        <i :class="itemo.icon"></i>
                                        <span slot="title" style="font-size: 13px">{{itemo.title}}</span>
                                    </template>
                                    <el-menu-item
                                        v-for="itemoo in itemo.children"
                                        :key="itemoo.permissionId"
                                        style="font-size: 13px; margin-bottom: 1px;"
                                        :index="itemoo.httpPath"
                                    >
                                        {{itemoo.title}}
                                    </el-menu-item>
                                </el-submenu>
                            </section>
                        </section>
                    </el-submenu>
                    <el-menu-item v-else :index="item.httpPath" class="el-menu-item-title">
                        <i :class="item.icon"></i>
                        <span slot="title" style="font-size: 13px">{{item.title}}</span>
                    </el-menu-item>
                </section>
                <!-- <NavMenu :navMenus="Menun"></NavMenu>  userPowers[0].children -->
            </el-menu>
        </el-aside>
    </div>

</template>
<script>
    import NavMenu from './navMenu'
    import Menu from '../../api/menu'
    export default {
        components: { NavMenu },
        computed: {
            iss() {
                if (this.$store.state.isOpen) {
                    this.src = 'https://goods.dingdian.xin/Fs6AjocM2a6-JIRWCvFavX_s2_mT?imageMogr2/thumbnail/400000@'
                } else {
                    this.src = 'https://goods.dingdian.xin/Fi0uNP33gYGM8aqo9ngV1gTZ2GW4?imageMogr2/thumbnail/400000@'
                }
                return this.$store.state.isOpen
            },
            userPowers() {
                if (this.$store.state.isChange) {
                    return this.$store.state.userPowers
                } else {
                    return JSON.parse(sessionStorage.getItem('userPower'))
                }
            }
        },
        created() {
            this.Menu = Menu
        },
        watch: {
            userAssignId(val1, val2) {

            }
        },

        data() {
            return {
                //  userPowers: JSON.parse(sessionStorage.getItem('userInfos')).userPower,
                userAssignId: sessionStorage.getItem('userAssignId'),
                isCollapse: this.$store.state.isOpen || false,
                index: '',
                Menu: [],
                src: ''
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                this.index = key
            },
            handleClose(key, keyPath) {

            }
        }
    }
</script>
<style lang="less" scoped>
//@import url(../../style/leftBar.less);
.logo {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2px;
    box-shadow: 0px 2px 8px 0px rgba(173, 14, 14, 0.1);
    background: #fff;
}

.el-aside {
  color: #333;
  height: 100%;
  overflow: hidden;
  .el-menu-item.is-active {
    background: #fff1f1;
    border-radius: 5px;
    color: #f44949;
  }
  .el-menu-item {
    box-sizing: border-box;
    width: 160px !important;
    text-align: left;
    height: 34px;
    line-height: 34px;
  }
  .el-menu--inline {
    height: 100%;
    width: 160px;
    overflow: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .el-submenu .el-menu-item {
    min-width: 160px !important;
    height: 34px !important;
    border-radius: 17px;
  }
  
  .el-submenu .is-opened .el-submenu__title {
    box-shadow: 1px 10px 20px 0px rgba(230, 0, 18, 0.15);
    border-radius: 10px;
    i {
      color: #f44949 !important;
    }
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  box-sizing: border-box;
  padding: 0 10px;
}
.el-menu--vertical {
  .el-menu-item {
    height: 34px;
    line-height: 34px;
  }
  .is-active {
    background: #fff1f1 !important;
    color: #474747;
  }
}
.el-menu-item-title {
  list-style: none;
  margin: 0;
  height: 34px;
  line-height: 34px;
}
.block {
  display: flex;
  justify-content: center;
}
</style>